<script setup>
/* 导入 */
import { ref, watch } from "vue";
import { useTownStore } from "@/stores";

/* 数据 */
const townStore = useTownStore();
const townLogo = ref([]);

/* 侦听 */
watch(
  // 指定侦听的目标
  () => townStore.currentTown,
  // 发生改变时回调
  (newTown) => {
    if (newTown && newTown.townlogo) {
      townLogo.value = newTown.townlogo;
    }
  },
  { immediate: true }, // 这里的 immediate: true 确保在初次加载时也能触发
);
</script>

<template>
  <div class="logo">
    <el-card style="width: 20vw">
      <template #header>
        <p>小镇标志</p>
      </template>
      <el-image :src="townLogo" fit="cover" class="card-image">
        <!-- 无法获取图片的占位图 -->
        <template #error>
          <div class="image-slot"></div>
        </template>
      </el-image>
    </el-card>
  </div>
</template>

<style scoped>
/* 确保图片覆盖整个卡片区域 */
.card-image {
  width: 100%;
}
.el-card {
  width: 100%; /* 可选，确保卡片宽度响应式 */
}
</style>
